<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>
		.imgactive{position: fixed;top: 50%;left: 50%;}
	</style>
</head>
<body>
	<ul class="imgbox1">
		<li style="height:120px;display:inline">
          	<img class="img" style="width:100px;height:100px;margin-right:20px;float:left;margin-bottom: 20px;" src="1.png">
      	</li>
      	<li style="height:120px;display:inline">
          	<img class="img" style="width:100px;height:100px;margin-right:20px;float:left;margin-bottom: 20px;" src="6.png">
      	</li>
      	<li style="height:120px;display:inline">
          	<img class="img" style="width:100px;height:100px;margin-right:20px;float:left;margin-bottom: 20px;" src="3.png">
      	</li>
	</ul>
	<script src="jquery.min.js"></script>
	<script>
		$(".imgbox1").on("click","img",function(){
			$(this).css({"width":"auto","height":"auto"});
			var h = $(this).height();
			var w = $(this).width();
			if(h>530){
				var heig = "-265px";
				var	hn = 530;//写死高度530px
				var x = hn/h;
				var	wn = w*x;//宽度
				if(wn>1000){
					var widt = "-500px";
					var y = 1000/wn;
					wn = 1000;
					hn = hn*y;
					heig = "-"+hn/2+"px";
				}else{
					var widt = "-"+wn/2+"px"; 
				}
			}else{
				if(w>1000){
					var wn = 1000;
					var y = wn/w;
					var hn = h*y;
					var widt = "-500px";  
					var heig = "-"+hn/2+"px";
				}
			}
			$(this).css({"height":hn,"width":wn});
			var copyimg = $(this).clone();
			$(this).css({"width":"100px","height":"100px"});
			$("body").append(copyimg);
			copyimg.addClass("imgactive");
			copyimg.css({"margin-top":heig,"margin-left":widt});
			console.log(heig,widt);
		});
		$("body").on("click",".imgactive",function(){
			$(this).remove();
		})
	</script>
</body>
</html>